<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0%;
        box-sizing: border-box;
      }
      #people {
        width: 400px;
        height: 1000px;
        background-color: #ccc;
        padding: 50px;
      }
      textarea {
        width: 100%;
        height: 300px;
        background-color: yellowgreen;
      }

      button {
        width: 50px;
        height: 30px;
        float: right;
      }
      ul {
        width: 100%;
        height: 500px;
        list-style: none;
      }
      li {
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 3px dotted red;
      }
      span {
        float: right;
        color: red;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="people">
      <textarea></textarea>
      <div>
        <button>发送</button>
      </div>
      <ul></ul>
    </div>

    <script>
      let txt = document.querySelector("textarea");
      let btn = document.querySelector("button");
      let ul = document.querySelector("ul");

      btn.onclick = function () {
        if (txt.value.trim() === "") {
          alert("请输入内容");
          return;
        }

        var li = document.createElement("li");

        li.innerHTML = txt.value + "<span>删除</span>";

        var fli = document.querySelectorAll("li")[0];

        ul.insertBefore(li, fli);

        txt.value = "";

        let span = document.querySelectorAll("span");
        for (i = 0; i < span.length; i++) {
          span[i].onclick = function () {
            this.parentNode.remove();
          };
        }
      };
    </script>
  </body>
</html>
